<script setup lang="ts">
import { delayRender } from '@pkgs/utils'
import Card from './components/card.vue'

const delay = delayRender(16)

</script>

<template>
  <div class="page">
    <Card v-if="delay(1)" />

    <Card v-if="delay(2)" />

    <Card v-if="delay(3)" />

    <Card v-if="delay(4)" />

    <Card v-if="delay(5)" />

    <Card v-if="delay(6)" />

    <Card v-if="delay(7)" />

    <Card v-if="delay(8)" />

    <Card v-if="delay(9)" />

    <Card v-if="delay(10)" />

    <Card v-if="delay(11)" />

    <Card v-if="delay(12)" />

    <Card v-if="delay(13)" />

    <Card v-if="delay(14)" />

    <Card v-if="delay(15)" />

    <Card v-if="delay(16)" />
  </div>
</template>

<style lang="less" scoped>
.page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  padding: 16px;
}
</style>
